<div class="content">
    <div id="example_title">
        <h1>Clone and Extend</h1>
        Native JS still does not support deep cloning of objects. Hence 2 more methods that allow that. It is safe to
        run them agains unclonable items, such as a function or an HTML element. In this case it will keep
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<style>
#encode {
    width: 600px;
    height: 450px;
    resize: vertical;
}
</style>
<textarea id="encode" class="w2ui-input">
{
    a: 'text',
    b: 1,
    body: document.body,
    func: () => { console.log(1) },
    c: {
        nested: {
            a: 'nested-text',
            b: 4
        }
    }
}
// extend with
{
    c: {
        number: 1,
        nested: { number: 3 }
    }
}
// and then with
{
    c: {
        number: 100,
        nested: { number2: 300 }
    }
}
</textarea>
<br><br>
<button class="w2ui-btn" onclick="clone()">Clone</button>
<button class="w2ui-btn" onclick="extend()">Deep Extend</button>

<!--CODE-->
<script type="module">
import { w2utils, w2popup } from '__W2UI_PATH__'

let obj = {
    a: 'text',
    b: 1,
    body: document.body,
    func: () => { console.log(1) },
    c: {
        nested: {
            a: 'nested-text',
            b: 4
        }
    }
}
let obj2 = {
    c: {
        number: 1,
        nested: { number: 3 }
    }
}
let obj3 = {
    c: {
        number: 100,
        nested: { number2: 300 }
    }
}

window.extend = function() {
    let rec = w2utils.extend({}, obj, obj2, obj3)
    console.log('With functions', rec)
    w2popup.open({
        title: 'Result (w/o functions) - see console',
        with: 600,
        height: 400,
        body: `<pre>${JSON.stringify(rec, null, 4)}</pre>`,
        actions: {
            Ok: w2popup.close
        }
    })
}

window.clone = function() {
    let cloned = w2utils.clone(obj, obj2, obj3)
    console.log('original !== cloned', obj !== cloned, cloned)
    w2popup.open({
        title: 'Result (w/o functions) - see console',
        with: 600,
        height: 400,
        body: `<pre>${JSON.stringify(cloned, null, 4)}</pre>`,
        actions: {
            Ok: w2popup.close
        }
    })
}
</script>
<!--CODE-->